{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Crawler</title>
    <link rel="stylesheet" href="{% static 'css/semantic.css' %}">
    <link rel="stylesheet" href="{% static 'css/up.css' %}">
    <script src="{% static 'js/jquery.min.js' %}"></script>
    <script src="{% static 'js/semantic.js' %}"></script>
</head>
<body>
<div class="ui thin visible left sidebar inverted vertical menu">
    <div class="header item">
        <img src="{% static 'img/logo.png' %}">
    </div>
    <a class="item" href="http://localhost:8000/job/index/">
        Job
        <i class="database icon"></i>
    </a>
    <a class="item" href="http://localhost:8000/job/chart">
        Charts
        <i class="bar chart icon"></i>
    </a>
    <a class="item" href="http://localhost:8000/admin">
        Admin
        <i class="user icon"></i>
    </a>
    <a class="item" href="{% url 'logout' %}">
        exit
        <i class="sign out icon"></i>
    </a>
</div>
<div class="dimmed pusher">
<div class="container">
    <div class="ui menu">
        <div class="header item" id="menu">
            Menu
            <i class="content icon"></i>
        </div>
        <form method="get" action="http://localhost:8000/job/search/" class="ui action input">
            {% csrf_token %}
            <input type="search" placeholder="搜索..." name="search" required>
            <button class="ui icon button" type="submit">
                <i class="search icon"></i>
            </button>
        </form>
        <div class="right floated container"><a href="">{{ request.user }}</a></div>
    </div>

</div>
    {% block grid %}{% endblock %}
</div>
<div id="box" class="box">
    <i class="huge arrow up icon"></i>
</div>
<script>
    $('#menu').click(function () {
        $('.ui.sidebar').sidebar('settings',{
            dimPage:false,
        }).sidebar('toggle');
    });
</script>
<script>
{#    定位到页面顶端 #}
    var timer = null;
    box.onclick = function () {
        cancelAnimationFrame(timer);
        timer = requestAnimationFrame(function fn() {
            var oTop = document.body.scrollTop || document.documentElement.scrollTop;
            if (oTop > 0) {
                document.body.scrollTop = document.documentElement.scrollTop = oTop - 50;
                timer = requestAnimationFrame(fn);
            } else {
                cancelAnimationFrame(timer);
            }
        });
    }
</script>
{% block js %}{% endblock %}
</body>
</html>